<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="col-md-8 ">
                <!-- 帖子列表 -->
                <div class="panel panel-default">
                    <div class="panel-heading">帖子列表
					    <div class="pull-right">
					    <a class="btn btn-success btn-xs" title="最新帖子">最新</a>
					    <a class="btn btn-warning btn-xs" title="最热帖子">最热</a>
					    <a class="btn btn-info btn-xs" title="最新回复">新回</a>
					    <a class="btn btn-danger btn-xs" title="查看全部精华贴">精</a>
					    <a class="btn btn-default btn-xs" title="过滤公告置顶帖">滤</a>
					    </div>
                    </div>

                    <ul class="list-group">
                    	<c:forEach items="${topics }" var="topic">
                        <li class="list-group-item">
                            <div class="media">
                            <div class="media-left">
                                <a href="${ctx }/user/info?userid=${topic.uid}">
                                    <img class="media-object" src="${ctx }${topic.head_img_address}" alt="...">
                                </a>

                            </div>
                            <div class="media-body">
                                <h5 class="media-heading">
                                	<a href="${ctx }/topic/detail?topicId=${topic.id}">${topic.title }</a>
                                </h5>
                                <c:if test="${not empty topic.labels}">
                                    <c:forEach items="${topic.labels}" var="label">
                                        <c:if test="${label.id == 1}">
                                            <small class="label  label-primary">顶</small>
                                        </c:if>
                                        <c:if test="${label.id == 2}">
                                            <small class="label  label-danger">精</small>
                                        </c:if>
                                        <c:if test="${label.id == 3}">
                                            <small class="label  label-default">热</small>
                                        </c:if>
                                    </c:forEach>
                                </c:if>
                                <!-- <small class="label  label-primary">顶</small>
                                <small class="label  label-danger">精</small>
                                <small class="label  label-default">锁</small>
                                <small class="label  label-success">官</small>
                                <small class="label label-a1">订</small>-->
                                <p  class="help-block">
                                	<a href="${ctx }/user/info?userid=${topic.uid}">
                                		<u>${topic.username }</u>
                                	</a> 发表于<code>${topic.publish_date }</code> - <i>${topic.area_name}</i>
                                	最后回复:<code>goulin</code> 
                                	回复数:<code >${topic.replyCount}</code>
                                	
                                </p>

                                <!-- <div class="help-block"></div> -->
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        </li>
                        </c:forEach>
                        <c:if test="${ empty topics  }">
                        <li class="list-group-item">
                            <div class="col-md-12">竟然没有一个帖子</div>
                        	<div class="clearfix"></div>
                        </li>
                        </c:if>
                    </ul>
                </div>
                
				<!-- 分页 ,最优是6个 -->
                <div class="text-center" style="margin-top: -12px;">
					<ul class="pagination" id="pageList">
	                		<li class=""><a href="javascript:void(0);" aria-label="Previous" onclick="previous(this)">«</a></li>
						<c:forEach begin="1" end="${pageInfo.totalPage }" varStatus="state">
								<li class=""><a href="javascript:void(0);" onclick="changePage(this)">${state.index}</a></li>
	                	</c:forEach>
							<li class=""><a href="javascript:void(0);" aria-label="Next" onclick="next(this)">»</a></li>
					</ul>
				</div>
				<form action="${ctx }/topic/index" method="post" id="gotoPageForm">
					<input type="hidden" id="gotoPage" name="pageVal" > 
				</form>
	</div>
	
	<script type="text/javascript">
		function changePage(ele){
			$(ele).parent().siblings("li").removeClass("active");
			$(ele).parent().addClass("active");
			$("#gotoPage").val($.trim($(ele).text()));
			$("#gotoPageForm").submit();
		}
        //上一页
        function previous(ele){
            //获取当前页码
            var index = $("#pageList li.active").index();
            //如果不是第一页
            if(index != 1 ){
                //获取当前页面的上一个li元素,并触发changePage方法
                var domA = $("#pageList li.active").prev().children("a").get(0);
                changePage(domA)
            }
        }
        //下一页
        function next(ele){
            var index = $("#pageList li.active").index();
            var last = $("#pageList li:last").prev().text();
            if(index != parseInt(last)){
                var domA = $("#pageList li.active").next().children("a").get(0);
                changePage(domA)
            }
        }
		
		$(function(){
			var currentPage = ${requestScope.gotoPage};
			$("#pageList li").each(function(){
				if($(this).text()==currentPage){
					$(this).addClass("active");
					return false;
				}
			})
		})
	
	</script>
